<template>
  <div class="content">
    <p class="title" v-if="title">{{ title }}</p>
    <div :class="title ? 'cont_box_title' : 'cont_box'">
      <slot></slot>
    </div>
    <div class="boxfoot"></div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
interface CardProp {
  title?: string;
}
withDefaults(defineProps<CardProp>(), {
  title: "",
});
</script>

<style scoped lang="scss">
.content {
  height: 100%;
  width: 100%;
  border: 1px solid rgba(25, 186, 139, 0.17);
  // padding: 0.1rem;
  background: url('@/assets/images/screen/line.png');
  background-size: 100% auto;
  position: relative;
  z-index: 10;
  background: rgba(0,0,0,0.1);
  .title {
    color: #fff;
    font-size: 1rem;
    padding-left: 1rem;
    // text-align: center;
    // margin-bottom: 0.1rem;
    background-image: url('@/assets/images/screen/bt.png');
    background-size: cover;
  }
  .cont_box_title {
    width: 100%;
    height: calc(100% - 0.4rem);
    // border: 1px solid red;
  }
  .cont_box {
    width: 100%;
    height: 100%;
    // border: 1px solid red;
  }
}
.content:before,
.content:after {
  position: absolute;
  width: 1rem;
  height: 1rem;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}
.content:before,
.boxfoot:before {
  border-left: 2px solid #02a6b5;
  left: 0;
}
.content:after,
.boxfoot:after {
  border-right: 2px solid #02a6b5;
  right: 0;
}
.boxfoot {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}
.boxfoot:before,
.boxfoot:after {
  position: absolute;
  width: 1rem;
  height: 1rem;
  content: "";
  border-bottom: 2px solid #02a6b5;
  bottom: 0;
}
</style>
